import React, {useRef, useEffect, memo} from 'react';
import moment from 'moment';

//水印组件封装
const WatermarkCanvas = ({ userId, onWatermarkReady }) => {
  const canvasRef = useRef(null);

  useEffect(() => {
    if (!canvasRef.current) return;

    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');

    canvas.width = 200;
    canvas.height = 150;

    const date = moment().format('YYYY/MM/DD');
    const text = `${userId} ${date}`;

    ctx.rotate((20 * Math.PI) / 180);
    ctx.font = "14px Verdana";
    ctx.fillStyle = "rgba(199, 199, 199,0.5)";
    ctx.textAlign = "left";
    ctx.textBaseline = "middle";
    ctx.fillText(text, 30, 65);

    onWatermarkReady(canvas.toDataURL("image/png"));
  }, [userId, onWatermarkReady]);

  return <canvas ref={canvasRef} style={{ display: 'none' }} />; // 隐藏canvas
};
export default memo(WatermarkCanvas);
